// 组件footer
$f-footer-prefix: 'f-cmp-footer';

.#{$f-footer-prefix} {
  display: flex;
  flex-direction: column;
  padding: $f-pt-card-section-inner-gutter;
  margin: 0;
  border-radius: $farris-split-section-border-radius;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 10px 0 rgba(31, 35, 41, 0.10);

  .#{$f-footer-prefix}-header {
    border-bottom: 1px dashed rgba(0, 0, 0, 0.10);

    @extend .f-section-header;
    padding: 0 0 .75rem;

    .f-content {
      flex-shrink: 1;
      flex-grow: 1;
      flex-basis: 0;
      overflow: hidden;
      white-space: nowrap;
    }

    .f-toolbar {
      color: $f-text-04;
      flex-shrink: 0;
      min-width: 10rem;

      .toolbar--collapse {
        cursor: pointer;
      }

      .toolbar--collapse-icon {
        font-family: FarrisIcons;
        margin: 0 0.375rem;
        font-size: 0.875rem;
        transition: transform 0.1s linear;

        &::before {
          content: "\eb58"
        }

        &:hover {
          color: $f-theme-01 ;
        }
      }
    }
  }
}

.#{$f-footer-prefix}-accordion {
  &.f-state-collapse {
    .f-cmp-footer-header {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .f-cmp-footer-content {
      display: none;
    }

    .f-toolbar {
      .toolbar--collapse-icon {
        transform: rotate(180deg);
      }
    }
  }
}


.f-tmpl-footer-same-gutter {
  margin: 0 10rem 0 0;
}

// 增加两类，强制带间距和强制不带间距的
.#{$f-footer-prefix}-hasgap {
  position: relative;
  @include sectionHasGutter;
}

.#{$f-footer-prefix}-nogap {
  &::before {
    display: none !important;
  }
}